<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<view class="xian-gray16"></view>
		 <!-- #endif -->
		<view class="question-body">
			<view class="title" @click="open_shop">
				{{table[index].name}}
				<image src="/static/images/icons/icon-right.png" mode="widthFix" class="fr"></image>
			</view>
			<textarea class="question-textarea" maxlength='-1' placeholder="请输入取消的原因" @blur="bindTextAreaBlur" auto-height />
		</view>
		<view class="hei_100" style="margin-top: 20rpx;"></view>
		<view class="details-bottom1">
			<view class="but-error" @click="submit()">提交</view>
		</view>
		<uni-popup ref="popup_shop" type="bottom">
			<view class="cont_shop">
				<view v-for="(item, index) in table" :data-index='index' :key='index' @click="changeSex">{{item.name}}</view>
				<view class="btn" @click="close_shop">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import { mapState, mapMutations } from 'vuex';
	
	var _this
	export default {
		components: {
			PublicHeader
		},
		data() {
			return {
				index: 4,
				table: [{
					name: '和商家商议后确认取消',
					value: '和商家商议后确认取消'
				}, {
					name: '服务人员联系不上',
					value: '服务人员联系不上'
				}, {
					name: '商家原因',
					value: '商家原因'
				}, {
					name: '个人原因',
					value: '个人原因'
				}, {
					name: '其它',
					value: '其它'
				}],
				value: '',
				title: '取消订单',
				control: true,
				columnNum:4
			}
		},
		mounted() {
			_this = this
		},
		methods: {
			submit() {
				console.log(_this.$Route.query)
				if (this.value + '' === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入取消订单的原因',
						duration: 1500
					});
					return
				}
				uni.showModal({
				    title: '',
				    content: '确定要取消该订单吗？',
					cancelColor: '#57BFFF',
					confirmColor: '#57BFFF',
				    success: function (res) {
				        if (res.confirm) {
							_this.$http
							.get('/order/cancelOrders/' + _this.$Route.query.orderId, {
								refundReason: _this.value
							}).
							then(function (response) {
								if (response.success) {
									uni.showToast({
										icon: 'none',
										title: '取消订单成功',
										duration: 1000
									});
									setTimeout(function() {
										uni.switchTab({
										    url: '/pages/order/index'
										});
									}, 1000)
								} else {
									uni.showToast({
										icon: 'none',
										title: response.msg,
										duration: 1000
									});
								}
							}).catch(function (error) {
								console.log(error);
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			bindTextAreaBlur (e) {
				console.log(e.detail.value)
				_this.value = e.detail.value
			},
			open_shop() {
				this.$refs.popup_shop.open();
			},
			close_shop(){
				this.$refs.popup_shop.close();
			},
			changeSex(e) {
				this.index = e.target.dataset.index
				if (this.value === '' && this.index != 4) {
					this.value = this.table[this.index].value
				}
				this.$refs.popup_shop.close()
			},
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F9FAFB;
}
image{
	width: 56rpx;
	margin-top: 24rpx;
	margin-right: -14rpx;
}
.question-body {
	width: 100%;
	/* overflow: hidden; */
	max-height: 600rpx;
	background-color: #FFFFFF;
	padding-bottom: 30rpx;
	overflow-y: auto;
}
.title{
	width: 686rpx;
	margin-left: 32rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-bottom: 1rpx solid #efeff0;
}
.question-textarea {
	padding-top: 30rpx;
	min-height: 140rpx;
	width: 91.4%;
	margin-left: 4.3%;
}
.details-bottom1 {
	width: 100%;
	margin-top: 100rpx;
	margin-bottom: 22rpx;
	position: fixed;
	bottom: 0;
}
.but-error {
	width: 91.4%;
	margin-left: 4.3%;
	height: 100rpx;
	background:rgba(87,191,255,1);
	box-shadow:0px 6px 20px 0px rgba(87,191,255,0.5);
	border-radius:10rpx;
	font-size:36rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.cont_shop{
	background-color: #fff;
	text-align: center;
}
.cont_shop view{
	height: 50rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	border-bottom: 1rpx solid #E7E7E7;
}
.cont_shop view:last-child{
	border-top: 10rpx solid #F6F6F9;
}
.icon{
	width: 20rpx!important;
	height: 20rpx!important;
	margin-top: 20rpx!important;
}
</style>
